<template>
	<view>
		<uv-picker ref="picker" :columns="shenglist" keyName="label" @confirm="confirm2"></uv-picker>
	</view>

	<view style="width: 30%;float: left;">
		<uv-drop-down ref="dropDown" sign="dropDown_1" text-active-color="#3c9cff"
			:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
			:extra-active-icon="{name:'arrow-up-fill',color:'#3c9cff',size:'26rpx'}" :defaultValue="defaultValue"
			:custom-style="{padding: '0 30rpx',border:'none'}" @click="openPicker">
			<uv-drop-down-item name="order" type="2" :label="shengfen" :value="dropItem('order').value">
			</uv-drop-down-item>
		</uv-drop-down>
	</view>

	<view style="width: 60%;float: left;margin-top: 12rpx;">
		<uv-search :showAction="false" :animation="false" style="margin-top:5rpx;" @search="search"
			:actionText="请输入姓名"></uv-search>
	</view>

	<view style="clear: both;border-bottom: 1px solid lightgray;padding-bottom:20rpx;">

		<uv-calendar ref="calendar" mode="range" @confirm="confirm" min-date="2025-01-01"></uv-calendar>
		<!-- 
		<view @click="open" style="font-size: 0.9375rem;color:rgb(60, 156, 255);margin-left:50rpx;">
			筛选日期：
			<span v-if="!start_time">未筛选</span>
			<span style="margin-left:0rpx;" v-if="start_time">{{start_time}}</span>
			<span style="margin:0 10rpx;" v-if="start_time">---</span>
			<span style="margin-left: 0rpx;" v-if="start_time">{{end_time}}</span>
		</view> -->

		<view>
			<uv-drop-down ref="dropDown" sign="dropDown_1" text-active-color="#3c9cff"
				:extra-icon="{name:'arrow-down-fill',color:'#666',size:'26rpx'}"
				:extra-active-icon="{name:'arrow-up-fill',color:'#3c9cff',size:'26rpx'}" :defaultValue="defaultValue"
				:custom-style="{padding: '0 30rpx',border:'none'}" @click="open">
				<uv-drop-down-item name="order" type="2" label="日期筛选">
				</uv-drop-down-item>

				<view style="width: 70%;margin-top: 18rpx;font-size: 30rpx;color: #3c9cff;">
					<span v-if="!start_time">无</span>
					<span style="margin-left:0rpx;" v-if="start_time">{{start_time}}</span>
					<span style="margin:0 10rpx;" v-if="start_time">---</span>
					<span style="margin-left: 0rpx;" v-if="start_time">{{end_time}}</span>
				</view>
			</uv-drop-down>
		</view>

	</view>

	<view class="" style="height:100%;overflow: hidden; background-color: white;">
		<!-- <uv-cell-group v-if="list.length>0">
			<uv-cell v-for="(item, index) in list" :key="index" :label="item.area" :title="item.nickname"
				:value="item.create_at" required="true" @click="goDetail2(item.id)">
			</uv-cell>
		</uv-cell-group> -->

		<uv-cell :center="true" v-for="(item, index) in list" :key="index" v-if="list.length>0"
			@click="goDetail2(item.id)">
			<template #title>
				<view>{{item.nickname}}</view>
				<!-- 		<view style="margin-top: 15rpx;">最新打卡城市:<span style="">{{item.city}}</span></view>
				<view style="margin-top: 15rpx;">出勤天数:<span style="">{{item.chuqin}}</span></view> -->
				<view style="margin-top: 15rpx;">提交工单数:<span style="">{{item.gongdan}}</span></view>
			</template>

		</uv-cell>

		<view v-else style="text-align: center;margin-top: 250rpx;color: lightgray;">暂无数据</view>
	</view>

</template>
<script>
	import config from "@/config/config.js";
	import xcUniappUtils from '@/library/xcore/js/XcUniappUtils.js';
	import xcHttpUtils from '@/library/xcore/js/XcHttpUtils.js';
	import xcViewUtils from '@/library/xcore/js/XcViewUtils.js';
	import xcCloginUtils from '@/library/xcore/js/XcCloginUtils.js';
	import xcCWeixinMpLoginUtils from '@/library/xcore/js/XcCWeixinMpLoginUtils.js';
	import {
		xsStringUtils,
		xsDateUtils,
		xsArrayUtils
	} from 'xstack-for-javascript';

	export default {
		onPageScroll() {
			// 滚动后及时更新位置
			this.$refs.dropDown.init();
		},
		computed: {
			dropItem(name) {
				return (name) => {
					const result = {};
					const find = this.result.find(item => item.name === name);
					if (find) {
						result.label = find.label;
						result.value = find.value;
					} else {
						result.label = this[name].label;
						result.value = this[name].value;
					}
					return result;
				}
			},
			// 获取当前下拉筛选项
			currentDropItem() {
				return this[this.activeName];
			}
		},
		data() {
			return {
				shenglist: [

				],
				shengfen:'所属省份',
				start_time: '',
				end_time: '',
				keyword: '输入姓名检索',
		
				// 筛选结果
				result: [{
					name: 'order',
					label: '所属省份',
					value: '1'
				}],
				nickname: '',
			
				shengfen_id: '',
				gongsi_id: '',
				list: [],
				config: config,
				xsStringUtils: xsStringUtils,
				xsDateUtils: xsDateUtils,
				sp: {
					id: null
				},
				sr: {
					row: [],
					userinfo: null
				},
				control: {}
			}
		},
		onLoad(options) {
			let that = this;
			that.gongsi_id = options.gongsi_id
		},

		onShow() {
			let that = this;
			this.getdata()
			this.getshengfen()
		},

		onPullDownRefresh() {
			let that = this;
			setTimeout(function() {
				that.public_show();
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			openPicker() {
				this.$refs.picker.open();
			},

			open() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				console.log('日历选择：', e)
				this.start_time = e[0]
				this.end_time = e[e.length - 1];

				this.getdata()
			},
			confirm2(e) {
				console.log('1111：', e)
				
				this.shengfen_id = e.value[0].value
				this.shengfen = e.value[0].label
				this.getdata()
			},
			search(e) {
				console.log('弹窗打开状态：', e);
				this.nickname = e
				this.getdata()
			},

			

			getshengfen() {
				var that = this
				uni.request({
					url: 'https://shanghaihuxi.cn/api/index/getshengfen2',
					header: {
						'Content-Type': 'application/json' // 请求头，可以根据接口要求修改
					},
					success: (res) => {
						that.shenglist[0] = res.data.data
					}
				});
			},

			getdata() {
				uni.showLoading({
					title: '数据加载中...',
					mask: true // 是否显示透明蒙层，防止触摸穿透
				});
				var that = this
				uni.request({
					url: 'https://shanghaihuxi.cn/api/index/getdakarenyuan',
					data: {
						gongsi_id: this.gongsi_id,
						shengfen_id: this.shengfen_id,
						nickname: this.nickname,
						start_time: this.start_time,
						end_time: this.end_time
					},
					header: {
						'Content-Type': 'application/json' // 请求头，可以根据接口要求修改
					},
					success: (res) => {
						console.log(222, res)
						that.list = res.data.data
						uni.hideLoading();
					}
				});
				
			},
			goDetail2(id) {
				uni.navigateTo({
					url: '/pages/xcdemo/baobiao?user_id=' + id
				});
			},
			control_clickLogin() {

				uni.navigateTo({
					url: '/pages/xclogin/me'
				});
			},
			goDetail(id) {
				console.log(id)
				uni.navigateTo({
					url: '/pages/csmwj/paper?id=' + id
				});
			},
			xinit() {
				let that = this;

			},
			public_show() {
				let that = this;
			},
			public_reset() {
				let that = this;
				that.public_show();
			},
			control_switchLocale(locale) {
				let that = this;
				xcLangUtils.switchLocale(locale);
			}
		}
	}
</script>

<style lang="scss">

</style>